<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">评价</block>
		</cu-custom> 
		<text class="h1">本次周期性饮食服务已结束</text>
		<text class="h6">您的食用效果如何呢？</text>
		<view class="bg">
			<image src="/static/comment/xx@2x.png" mode=""></image>
		</view>
		<view class="weight-wrapper" v-if="!!is_weight">
			<text>请输入您的体重(kg)：</text>
			<input type="number" value="" placeholder="(kg)" v-model="weight" />
		</view>
		<text class="h7">快为本此周期性服务打个分吧~</text>
		<view class="star-wrapper">
			<image :src="index <= star_num ? '/static/comment/star_light.png' : '/static/comment/star_hide.png'" v-for="(item, index) in 5"
			 :key="index" @click="star_num = index"></image>
		</view>
		<textarea type="text" placeholder="说说您的食用感受或菜品改进建议吧！" v-model="content"></textarea>
		<view class="btn" @click="submitComment">
			<text>提交评价</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '', //plan是计划 food是菜品
				order_id: 0,
				star_num: 4, //0-4
				content: '',
				is_weight: 0,
				weight: 0
			};
		},
		onLoad(o) {
			if (o.order_id) {
				this.order_id = o.order_id;
			}
			if (o.type) {
				this.type = o.type;
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData: function() {
				this.$api.comment({
						order_id: this.order_id
					})
					.then(res => {
						this.is_weight = res.data;
					})
			},
			submitComment: function() {
				if (!!this.is_weight && (this.weight == '' || this.weight == 0)) {
					this.$db._ShowToast('请填写体重信息');
					return false;
				}
				if (!this.content || this.content.length < 1) {
					this.$db._ShowToast('请填写评价信息');
					return false;
				}
				this.$api.evaluate({
						type: this.type == 'food' ? 2 : 1,
						order_id: this.order_id,
						star: this.star_num + 1,
						content: this.content,
						weight: this.weight
					})
					.then(res => {
						this.$db._ShowToast(res.msg, () => {
							if (this.type == 'food' && !!this.is_weight) {
								this.$db._NavTo('weight-record-page', {}, this.$db.navToMethod[1])
								return false;
							}
							this.$db._GoBack();
						});
					})
			}
		}
	}
</script>

<style lang="scss">
	.h1 {
		display: block;
		padding: 103rpx 0 16rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		color: rgba(44, 44, 44, 1);
	}

	.bg {
		margin: 50rpx auto 20rpx;
		width: 254rpx;
		height: 190rpx;

		image {
			width: 254rpx;
			height: 190rpx;
		}
	}

	.weight-wrapper {
		margin: 0 20rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			color: #2C2C2C;
		}

		input {
			padding: 10rpx;
			width: 100rpx;
			font-size: 24rpx;
			text-align: center;
			background: #F5F5F5;
		}
	}

	.h6 {
		display: block;
		text-align: center;
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(44, 44, 44, 1);
	}

	.h7 {
		display: block;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #2C2C2C;
	}

	.star-wrapper {
		margin: 33rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 51rpx;
			height: 48rpx;

			&+image {
				margin-left: 56rpx;
			}
		}
	}

	textarea {
		box-sizing: border-box;
		margin: 46rpx auto 0;
		padding: 30rpx;
		width: 636rpx;
		height: 258rpx;
		font-size: 24rpx;
		background: #F5F5F5;
	}

	.btn {
		margin: 100rpx auto 0;
		width: 556rpx;
		height: 74rpx;
		border-radius: 37rpx;
		background: #DFBB50;
		text-align: center;

		text {
			line-height: 74rpx;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>
